/*
 *  uni-app flex 布局盒子
 *  作者:SEven
 *  使用说明
 *  以坐标轴区分横、纵向 = x , y
 * 
 *  配合对齐方向
 *  left，center，right，space
 *  top，middle，bottom
 * 
 * item5-1   1/5父组件宽度、高度
 * item12-1  1/12父组件宽度、高度
*/

/* 分列式弹性盒子，以X轴从左到右排列 */
.flex-x{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	
	/* 水平左对齐 */
	&.left{
		justify-content: flex-start;
	}
	
	/* 水平居中对齐 */
	&.center{
		justify-content: center;
	}
	
	/* 水平右对齐 */
	&.right{
		justify-content: flex-end;
	}
	
	/* 水平两端对齐 */
	&.space{
		justify-content: space-between;
	}
	
	/* 水平两端居中对齐 */
	&.around{
		justify-content: space-around;
	}
	
	/* 垂直顶部对齐 */
	&.top{
		align-items: flex-start;
		align-content: flex-start;
	}
	
	/* 垂直顶部居中 */
	&.middle{
		align-items: center;
		align-content: center;
	}
	
	/* 垂直底部对齐 */
	&.bottom{
		align-items: flex-end;
		align-content: flex-end;
	}
	
	/* 允许换行 */
	&.flex-wrap{
		flex-wrap: wrap;
	}
	
	/* 等比分列，2-6列 */
	@for $i from 2 through 6
	{
		&.item-#{$i}{
			&>view{
				width:(100% / $i);
			}
		}
	}
	
	/* 弹性元素 */
	.item-grow{
		flex-grow: 1;
		width:0;
	}
}
/* 弹性布局 子元素样式 */
@for $i from 1 through 12{
	&.flex-x .item12-#{$i}{
		width: (100% / 12 * $i);
	}
}
@for $i from 1 through 5{
	&.flex-x .item5-#{$i}{
		width: (100% / 5 * $i);
	}
}


/* 分行式弹性盒子，以Y轴从上到下排列 */
.flex-y{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	
	/* 水平居中对齐 */
	&.center{
		align-items: center;
		align-content: center;
	}
	
	/* 水平左对齐 */
	&.left{
		align-items: flex-start;
		align-content: flex-start;
	}
	
	/* 水平右对齐 */
	&.right{
		align-items: flex-end;
		align-content: flex-end;
	}
	
	/* 垂直两端对齐 */
	&.space{
		justify-content: space-between;
	}
	
	/* 垂直顶部对齐 */
	&.top{
		justify-content: flex-start;
	}
	/* 垂直居中对齐 */
	&.middle{
		justify-content: center;
	}
	
	/* 垂直底部对齐 */
	&.bottom{
		justify-content: flex-end;
	}
	
	/* 等比分行，2-6行 */
	@for $i from 2 through 6
	{
		&.item-#{$i}{
			&>view{
				height:(100% / $i);
			}
		}
	}
	
	/* 弹性元素 */
	.item-grow{
		flex-grow: 1;
		height: 0;
	}
}
/* 弹性布局 子元素样式 */
@for $i from 1 through 12{
	&.flex-y .item12-#{$i}{
		height: (100% / 12 * $i);
	}
}
@for $i from 1 through 5{
	&.flex-y .item5-#{$i}{
		height: (20% * $i);
	}
}